<template>
  <div class="admin-dashboard">
    <div class="admin-header">
      <h1>动物乐园后台管理系统</h1>
      <div class="header-actions">
        <span class="welcome-text">欢迎管理员</span>
        <button @click="logout" class="logout-btn">退出登录</button>
      </div>
    </div>
    
    <div class="admin-layout">
      <aside class="sidebar">
        <nav class="admin-nav">
          <ul>
            <li>
              <router-link to="/admin/dashboard" class="nav-item" active-class="active">
                <span class="nav-icon">📊</span>
                <span class="nav-text">仪表盘</span>
              </router-link>
            </li>
            <li>
              <router-link to="/admin/animals" class="nav-item" active-class="active">
                <span class="nav-icon">🐾</span>
                <span class="nav-text">动物管理</span>
              </router-link>
            </li>
            <li>
              <router-link to="/admin/categories" class="nav-item" active-class="active">
                <span class="nav-icon">📂</span>
                <span class="nav-text">分类管理</span>
              </router-link>
            </li>
            <li>
              <router-link to="/admin/users" class="nav-item" active-class="active">
                <span class="nav-icon">👥</span>
                <span class="nav-text">用户管理</span>
              </router-link>
            </li>
            <li>
              <router-link to="/admin/memberships" class="nav-item" active-class="active">
                <span class="nav-icon">💎</span>
                <span class="nav-text">会员管理</span>
              </router-link>
            </li>
            <li>
              <router-link to="/admin/comments" class="nav-item" active-class="active">
                <span class="nav-icon">💬</span>
                <span class="nav-text">评论管理</span>
              </router-link>
            </li>
          </ul>
        </nav>
      </aside>
      
      <main class="main-content">
        <div class="page-header">
          <h2>会员管理</h2>
          <button @click="showAddMembershipForm = true" class="add-btn">
            <span>+</span> 添加会员等级
          </button>
        </div>
        
        <div class="stats-overview">
          <div class="stat-card">
            <div class="stat-icon">💎</div>
            <div class="stat-content">
              <h3>总会员数</h3>
              <p class="stat-number">{{ totalMembersCount }}</p>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon">💰</div>
            <div class="stat-content">
              <h3>本月收入</h3>
              <p class="stat-number">¥{{ monthlyRevenue }}</p>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon">📈</div>
            <div class="stat-content">
              <h3>会员增长率</h3>
              <p class="stat-number">{{ growthRate }}%</p>
            </div>
          </div>
        </div>
        
        <div class="tabs">
          <button 
            :class="['tab-btn', { active: activeTab === 'levels' }]" 
            @click="activeTab = 'levels'"
          >
            会员等级设置
          </button>
          <button 
            :class="['tab-btn', { active: activeTab === 'members' }]" 
            @click="activeTab = 'members'"
          >
            会员用户列表
          </button>
          <button 
            :class="['tab-btn', { active: activeTab === 'transactions' }]" 
            @click="activeTab = 'transactions'"
          >
            交易记录
          </button>
        </div>
        
        <!-- 会员等级设置 -->
        <div v-if="activeTab === 'levels'" class="tab-content">
          <div class="table-container">
            <table class="data-table">
              <thead>
                <tr>
                  <th>等级ID</th>
                  <th>等级名称</th>
                  <th>价格(月)</th>
                  <th>价格(年)</th>
                  <th>权限描述</th>
                  <th>会员数量</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="level in membershipLevels" :key="level.id">
                  <td>{{ level.id }}</td>
                  <td>
                    <span :class="`level-badge level-${level.id}`">
                      {{ level.name }}
                    </span>
                  </td>
                  <td>¥{{ level.monthlyPrice }}</td>
                  <td>¥{{ level.yearlyPrice }}</td>
                  <td>{{ level.description }}</td>
                  <td>{{ getLevelMemberCount(level.id) }}</td>
                  <td>
                    <div class="action-buttons">
                      <button @click="editMembershipLevel(level)" class="edit-btn">编辑</button>
                      <button 
                        @click="deleteMembershipLevel(level.id)" 
                        class="delete-btn"
                        :disabled="level.id === 0 || getLevelMemberCount(level.id) > 0"
                      >
                        删除
                      </button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        
        <!-- 会员用户列表 -->
        <div v-if="activeTab === 'members'" class="tab-content">
          <div class="search-filter">
            <input 
              v-model="memberSearchQuery" 
              type="text" 
              placeholder="搜索用户名或邮箱..."
              class="search-input"
            />
            <select v-model="selectedMemberLevel" class="filter-select">
              <option value="">全部等级</option>
              <option v-for="level in membershipLevels.filter(l => l.id > 0)" :key="level.id" :value="level.id">
                {{ level.name }}
              </option>
            </select>
          </div>
          
          <div class="table-container">
            <table class="data-table">
              <thead>
                <tr>
                  <th>用户ID</th>
                  <th>用户名</th>
                  <th>邮箱</th>
                  <th>会员等级</th>
                  <th>会员到期日</th>
                  <th>注册时间</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="member in filteredMembers" :key="member.id">
                  <td>{{ member.id }}</td>
                  <td>
                    <div class="user-info">
                      <div class="user-avatar">{{ member.name.charAt(0).toUpperCase() }}</div>
                      <span>{{ member.name }}</span>
                    </div>
                  </td>
                  <td>{{ member.email }}</td>
                  <td>
                    <span :class="`level-badge level-${member.membershipLevel}`">
                      {{ getLevelName(member.membershipLevel) }}
                    </span>
                  </td>
                  <td>{{ formatDate(member.membershipExpiry) }}</td>
                  <td>{{ formatDate(member.createdAt) }}</td>
                  <td>
                    <div class="action-buttons">
                      <button @click="viewMemberDetail(member)" class="view-btn">详情</button>
                      <button @click="renewMembership(member)" class="renew-btn">续费</button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <div class="pagination">
            <button 
              @click="memberCurrentPage--" 
              :disabled="memberCurrentPage === 1"
              class="pagination-btn"
            >
              上一页
            </button>
            <span class="page-info">{{ memberCurrentPage }} / {{ memberTotalPages }}</span>
            <button 
              @click="memberCurrentPage++" 
              :disabled="memberCurrentPage === memberTotalPages"
              class="pagination-btn"
            >
              下一页
            </button>
          </div>
        </div>
        
        <!-- 交易记录 -->
        <div v-if="activeTab === 'transactions'" class="tab-content">
          <div class="search-filter">
            <input 
              v-model="transactionSearchQuery" 
              type="text" 
              placeholder="搜索用户名或交易ID..."
              class="search-input"
            />
            <select v-model="selectedTransactionStatus" class="filter-select">
              <option value="">全部状态</option>
              <option value="completed">已完成</option>
              <option value="pending">处理中</option>
              <option value="failed">失败</option>
            </select>
          </div>
          
          <div class="table-container">
            <table class="data-table">
              <thead>
                <tr>
                  <th>交易ID</th>
                  <th>用户</th>
                  <th>会员等级</th>
                  <th>金额</th>
                  <th>支付方式</th>
                  <th>交易时间</th>
                  <th>状态</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="transaction in filteredTransactions" :key="transaction.id">
                  <td>{{ transaction.id }}</td>
                  <td>{{ getUserName(transaction.userId) }}</td>
                  <td>{{ getLevelName(transaction.membershipLevelId) }}</td>
                  <td>¥{{ transaction.amount }}</td>
                  <td>{{ transaction.paymentMethod }}</td>
                  <td>{{ formatDate(transaction.createdAt) }}</td>
                  <td>
                    <span :class="`status-badge ${transaction.status}`">
                      {{ getStatusText(transaction.status) }}
                    </span>
                  </td>
                  <td>
                    <button @click="viewTransactionDetail(transaction)" class="view-btn">详情</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        
        <!-- 添加/编辑会员等级模态框 -->
        <div v-if="showAddMembershipForm || showEditMembershipForm" class="modal-overlay" @click="closeModal">
          <div class="modal-content" @click.stop>
            <div class="modal-header">
              <h3>{{ showEditMembershipForm ? '编辑会员等级' : '添加会员等级' }}</h3>
              <button @click="closeModal" class="close-btn">×</button>
            </div>
            <div class="modal-body">
              <form @submit.prevent="submitMembershipForm">
                <div class="form-group">
                  <label for="name">等级名称</label>
                  <input 
                    type="text" 
                    id="name" 
                    v-model="membershipForm.name"
                    required
                    class="form-input"
                  />
                </div>
                <div class="form-row">
                  <div class="form-group">
                    <label for="monthlyPrice">月付价格</label>
                    <input 
                      type="number" 
                      id="monthlyPrice" 
                      v-model.number="membershipForm.monthlyPrice"
                      min="0"
                      step="0.01"
                      required
                      class="form-input"
                    />
                  </div>
                  <div class="form-group">
                    <label for="yearlyPrice">年付价格</label>
                    <input 
                      type="number" 
                      id="yearlyPrice" 
                      v-model.number="membershipForm.yearlyPrice"
                      min="0"
                      step="0.01"
                      required
                      class="form-input"
                    />
                  </div>
                </div>
                <div class="form-group">
                  <label for="description">权限描述</label>
                  <textarea 
                    id="description" 
                    v-model="membershipForm.description"
                    rows="4"
                    required
                    class="form-input"
                  ></textarea>
                </div>
                <div class="form-group">
                  <label>权限列表</label>
                  <div class="permission-list">
                    <label v-for="permission in availablePermissions" :key="permission.id" class="permission-item">
                      <input 
                        type="checkbox" 
                        :value="permission.id"
                        v-model="membershipForm.permissions"
                      />
                      <span>{{ permission.name }}</span>
                    </label>
                  </div>
                </div>
                <div class="form-actions">
                  <button type="button" @click="closeModal" class="cancel-btn">取消</button>
                  <button type="submit" class="submit-btn">
                    {{ showEditMembershipForm ? '更新' : '添加' }}
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MembershipManagementView',
  data() {
    return {
      // 统计数据
      totalMembersCount: 0,
      monthlyRevenue: 0,
      growthRate: 0,
      
      // 标签页控制
      activeTab: 'levels',
      
      // 会员等级数据
      membershipLevels: [],
      members: [],
      transactions: [],
      availablePermissions: [],
      
      // 搜索和筛选
      memberSearchQuery: '',
      selectedMemberLevel: '',
      transactionSearchQuery: '',
      selectedTransactionStatus: '',
      
      // 分页
      memberCurrentPage: 1,
      itemsPerPage: 10,
      
      // 模态框控制
      showAddMembershipForm: false,
      showEditMembershipForm: false,
      
      // 表单数据
      membershipForm: {
        name: '',
        monthlyPrice: 0,
        yearlyPrice: 0,
        description: '',
        permissions: []
      },
      editingLevelId: null
    }
  },
  computed: {
    filteredMembers() {
      let result = this.members.filter(m => m.membershipLevel > 0)
      
      // 搜索过滤
      if (this.memberSearchQuery) {
        const query = this.memberSearchQuery.toLowerCase()
        result = result.filter(member => 
          member.name.toLowerCase().includes(query) || 
          member.email.toLowerCase().includes(query)
        )
      }
      
      // 等级过滤
      if (this.selectedMemberLevel) {
        result = result.filter(member => 
          member.membershipLevel === parseInt(this.selectedMemberLevel)
        )
      }
      
      // 分页
      const start = (this.memberCurrentPage - 1) * this.itemsPerPage
      const end = start + this.itemsPerPage
      return result.slice(start, end)
    },
    memberTotalPages() {
      let result = this.members.filter(m => m.membershipLevel > 0)
      
      // 应用相同的过滤条件
      if (this.memberSearchQuery) {
        const query = this.memberSearchQuery.toLowerCase()
        result = result.filter(member => 
          member.name.toLowerCase().includes(query) || 
          member.email.toLowerCase().includes(query)
        )
      }
      
      if (this.selectedMemberLevel) {
        result = result.filter(member => 
          member.membershipLevel === parseInt(this.selectedMemberLevel)
        )
      }
      
      return Math.ceil(result.length / this.itemsPerPage)
    },
    filteredTransactions() {
      let result = this.transactions
      
      // 搜索过滤
      if (this.transactionSearchQuery) {
        const query = this.transactionSearchQuery.toLowerCase()
        result = result.filter(transaction => 
          transaction.id.toLowerCase().includes(query) ||
          this.getUserName(transaction.userId).toLowerCase().includes(query)
        )
      }
      
      // 状态过滤
      if (this.selectedTransactionStatus) {
        result = result.filter(transaction => 
          transaction.status === this.selectedTransactionStatus
        )
      }
      
      return result
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      // 模拟数据，实际应该从API获取
      this.membershipLevels = [
        { id: 0, name: '非会员', monthlyPrice: 0, yearlyPrice: 0, description: '基础功能访问', permissions: [] },
        { id: 1, name: '普通会员', monthlyPrice: 9.9, yearlyPrice: 99, description: '基础会员权益', permissions: [1, 2] },
        { id: 2, name: '高级会员', monthlyPrice: 19.9, yearlyPrice: 199, description: '高级会员权益', permissions: [1, 2, 3, 4] },
        { id: 3, name: 'VIP会员', monthlyPrice: 39.9, yearlyPrice: 399, description: '尊享会员权益', permissions: [1, 2, 3, 4, 5, 6] }
      ]
      
      this.members = [
        { id: 1, name: '张三', email: 'zhangsan@example.com', membershipLevel: 3, membershipExpiry: '2024-12-31', createdAt: '2023-01-10' },
        { id: 2, name: '李四', email: 'lisi@example.com', membershipLevel: 2, membershipExpiry: '2024-10-15', createdAt: '2023-01-15' },
        { id: 3, name: '王五', email: 'wangwu@example.com', membershipLevel: 1, membershipExpiry: '2024-09-20', createdAt: '2023-02-01' },
        { id: 5, name: '钱七', email: 'qianqi@example.com', membershipLevel: 2, membershipExpiry: '2024-11-30', createdAt: '2023-02-20' },
        { id: 7, name: '周九', email: 'zhoujiu@example.com', membershipLevel: 3, membershipExpiry: '2025-01-15', createdAt: '2023-03-15' },
        { id: 8, name: '吴十', email: 'wushi@example.com', membershipLevel: 0, membershipExpiry: null, createdAt: '2023-03-25' },
        { id: 9, name: '郑十一', email: 'zhengsiyi@example.com', membershipLevel: 1, membershipExpiry: '2024-08-10', createdAt: '2023-04-05' },
        { id: 10, name: '王十二', email: 'wangshier@example.com', membershipLevel: 2, membershipExpiry: '2024-12-01', createdAt: '2023-04-20' }
      ]
      
      this.transactions = [
        { id: 'TXN001', userId: 1, membershipLevelId: 3, amount: 399, paymentMethod: '支付宝', status: 'completed', createdAt: '2023-06-15' },
        { id: 'TXN002', userId: 2, membershipLevelId: 2, amount: 19.9, paymentMethod: '微信支付', status: 'completed', createdAt: '2023-07-20' },
        { id: 'TXN003', userId: 3, membershipLevelId: 1, amount: 9.9, paymentMethod: '支付宝', status: 'completed', createdAt: '2023-08-05' },
        { id: 'TXN004', userId: 5, membershipLevelId: 2, amount: 199, paymentMethod: '微信支付', status: 'completed', createdAt: '2023-09-10' },
        { id: 'TXN005', userId: 7, membershipLevelId: 3, amount: 39.9, paymentMethod: '支付宝', status: 'pending', createdAt: '2023-10-15' },
        { id: 'TXN006', userId: 9, membershipLevelId: 1, amount: 99, paymentMethod: '微信支付', status: 'failed', createdAt: '2023-11-20' }
      ]
      
      this.availablePermissions = [
        { id: 1, name: '高清图片查看' },
        { id: 2, name: '无广告浏览' },
        { id: 3, name: '专属动物资料' },
        { id: 4, name: '会员专属活动' },
        { id: 5, name: '优先参与直播' },
        { id: 6, name: '专属客服' }
      ]
      
      // 计算统计数据
      this.totalMembersCount = this.members.filter(m => m.membershipLevel > 0).length
      this.monthlyRevenue = this.transactions
        .filter(t => t.status === 'completed' && new Date(t.createdAt).getMonth() === new Date().getMonth())
        .reduce((sum, t) => sum + t.amount, 0)
      this.growthRate = 12.5 // 模拟增长率
    },
    getLevelName(levelId) {
      const level = this.membershipLevels.find(l => l.id === levelId)
      return level ? level.name : '未知'
    },
    getLevelMemberCount(levelId) {
      return this.members.filter(m => m.membershipLevel === levelId).length
    },
    getUserName(userId) {
      const user = this.members.find(m => m.id === userId)
      return user ? user.name : '未知用户'
    },
    getStatusText(status) {
      const statusMap = {
        completed: '已完成',
        pending: '处理中',
        failed: '失败'
      }
      return statusMap[status] || '未知'
    },
    formatDate(dateString) {
      if (!dateString) return '永久有效'
      const date = new Date(dateString)
      return date.toLocaleDateString()
    },
    editMembershipLevel(level) {
      this.membershipForm = {
        name: level.name,
        monthlyPrice: level.monthlyPrice,
        yearlyPrice: level.yearlyPrice,
        description: level.description,
        permissions: [...level.permissions]
      }
      this.editingLevelId = level.id
      this.showEditMembershipForm = true
    },
    deleteMembershipLevel(id) {
      if (id === 0) {
        alert('非会员等级不能删除！')
        return
      }
      
      const memberCount = this.getLevelMemberCount(id)
      if (memberCount > 0) {
        alert(`该等级下还有${memberCount}名会员，无法删除！`)
        return
      }
      
      if (confirm('确定要删除这个会员等级吗？')) {
        // 实际应该调用API删除
        this.membershipLevels = this.membershipLevels.filter(level => level.id !== id)
      }
    },
    submitMembershipForm() {
      if (this.showEditMembershipForm) {
        // 编辑模式
        const index = this.membershipLevels.findIndex(l => l.id === this.editingLevelId)
        if (index !== -1) {
          this.membershipLevels[index] = {
            ...this.membershipLevels[index],
            ...this.membershipForm
          }
        }
      } else {
        // 添加模式
        const newLevel = {
          id: Math.max(...this.membershipLevels.map(l => l.id)) + 1,
          ...this.membershipForm
        }
        this.membershipLevels.push(newLevel)
      }
      this.closeModal()
    },
    viewMemberDetail(member) {
      alert(`查看用户 ${member.name} 的会员详情`)
      // 实际应该打开详情模态框
    },
    renewMembership(member) {
      alert(`为用户 ${member.name} 办理续费`)
      // 实际应该打开续费模态框
    },
    viewTransactionDetail(transaction) {
      alert(`查看交易 ${transaction.id} 的详情`)
      // 实际应该打开交易详情模态框
    },
    closeModal() {
      this.showAddMembershipForm = false
      this.showEditMembershipForm = false
      this.editingLevelId = null
      this.resetMembershipForm()
    },
    resetMembershipForm() {
      this.membershipForm = {
        name: '',
        monthlyPrice: 0,
        yearlyPrice: 0,
        description: '',
        permissions: []
      }
    },
    logout() {
      localStorage.removeItem('user')
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>
/* 复用之前组件的大部分样式 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.add-btn {
  background-color: #27ae60;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background-color 0.2s;
}

.add-btn:hover {
  background-color: #229954;
}

.stats-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  background-color: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.stat-icon {
  font-size: 2.5rem;
}

.stat-content h3 {
  margin: 0;
  color: #7f8c8d;
  font-size: 0.9rem;
  font-weight: normal;
}

.stat-number {
  margin: 0.5rem 0 0 0;
  font-size: 1.8rem;
  font-weight: bold;
  color: #2c3e50;
}

.tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  background-color: #f8f9fa;
  padding: 0.5rem;
  border-radius: 8px;
}

.tab-btn {
  padding: 0.75rem 1.5rem;
  border: none;
  background-color: transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s;
}

.tab-btn.active {
  background-color: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  font-weight: 500;
}

.tab-btn:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.5);
}

.search-filter {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.search-input,
.filter-select {
  padding: 0.75rem 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.search-input {
  flex: 1;
  min-width: 200px;
}

.filter-select {
  min-width: 150px;
}

.table-container {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.data-table th {
  background-color: #f8f9fa;
  font-weight: bold;
  color: #2c3e50;
}

.data-table tbody tr:hover {
  background-color: #f8f9fa;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #3498db;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.9rem;
}

.level-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.85rem;
  font-weight: 500;
}

.level-badge.level-0 {
  background-color: #e9ecef;
  color: #495057;
}

.level-badge.level-1 {
  background-color: #d1ecf1;
  color: #0c5460;
}

.level-badge.level-2 {
  background-color: #fff3cd;
  color: #856404;
}

.level-badge.level-3 {
  background-color: #f8d7da;
  color: #721c24;
}

.status-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.85rem;
  font-weight: 500;
}

.status-badge.completed {
  background-color: #d4edda;
  color: #155724;
}

.status-badge.pending {
  background-color: #fff3cd;
  color: #856404;
}

.status-badge.failed {
  background-color: #f8d7da;
  color: #721c24;
}

.action-buttons {
  display: flex;
  gap: 0.5rem;
}

.edit-btn,
.delete-btn,
.view-btn,
.renew-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s;
}

.edit-btn {
  background-color: #3498db;
  color: white;
}

.edit-btn:hover {
  background-color: #2980b9;
}

.delete-btn {
  background-color: #e74c3c;
  color: white;
}

.delete-btn:hover:not(:disabled) {
  background-color: #c0392b;
}

.delete-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}

.view-btn {
  background-color: #6c757d;
  color: white;
}

.view-btn:hover {
  background-color: #5a6268;
}

.renew-btn {
  background-color: #28a745;
  color: white;
}

.renew-btn:hover {
  background-color: #218838;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.pagination-btn {
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  background-color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.pagination-btn:hover:not(:disabled) {
  background-color: #f8f9fa;
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  font-size: 1rem;
  color: #666;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid #eee;
}

.modal-header h3 {
  margin: 0;
  color: #2c3e50;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.close-btn:hover {
  background-color: #f8f9fa;
}

.modal-body {
  padding: 1.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #2c3e50;
}

.form-input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.form-input:focus {
  outline: none;
  border-color: #3498db;
}

.permission-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
}

.permission-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.permission-item input[type="checkbox"] {
  cursor: pointer;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2rem;
}

.cancel-btn,
.submit-btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s;
}

.cancel-btn {
  background-color: #6c757d;
  color: white;
}

.cancel-btn:hover {
  background-color: #5a6268;
}

.submit-btn {
  background-color: #28a745;
  color: white;
}

.submit-btn:hover {
  background-color: #218838;
}

@media (max-width: 768px) {
  .stats-overview {
    grid-template-columns: 1fr;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .search-filter {
    flex-direction: column;
  }
  
  .search-input,
  .filter-select {
    width: 100%;
  }
  
  .action-buttons {
    flex-direction: column;
  }
}
</style>